<template>
  <div id="app">
    <!-- 固定在顶部 -->
    <div class="container fixed-top pt-4">
      <!-- 添加待办事项 -->
      <form class="input-group mb-3">
        <span class="input-group-text">Todo</span>
        <input type="text" class="form-control">
        <button class="btn btn-primary" type="submit">Add</button>
      </form>

      <!-- 筛选项 -->
      <div class="d-flex justify-content-between">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="flexCheck1">
          <label class="form-check-label" for="flexCheck1">
            Todo <span class="py-sm-1 px-sm-1 mx-1 border badge rounded bg-light text-dark border-dark">0</span>
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="flexCheck2">
          <label class="form-check-label" for="flexCheck2">
            In Progress <span class="py-sm-1 px-sm-1 mx-1 border badge rounded bg-warning border-warning">0</span>
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="flexCheck3">
          <label class="form-check-label" for="flexCheck3">
            Done <span class="py-sm-1 px-sm-1 mx-1 border badge rounded bg-success border-success">0</span>
          </label>
        </div>
      </div>
    </div>

    <div class="container pt-5">
      <!-- 任务列表 -->
      <ul class="list-group">
        <li class="list-group-item d-flex align-items-center">
          <font-awesome-icon class="todo-move pointer" icon="ellipsis-v" size="xs"/>
          <div class="pointer mx-2 badge rounded-circle border bg-light border-dark">
            <span class="invisible">*</span>
          </div>
          <div class="d-inline-block text-truncate flex-sm-grow-1 pointer mx-1">测试</div>
          <font-awesome-icon icon="edit" size="xs" class="mx-2 pointer"/>
          <font-awesome-icon icon="times" size="xs" class="pointer"/>
        </li>
        <li class="list-group-item d-flex align-items-center">
          <font-awesome-icon class="todo-move pointer" icon="ellipsis-v" size="xs"/>
          <div class="pointer mx-2 badge rounded-circle border bg-warning border-warning">
            <span class="invisible">*</span>
          </div>
          <div class="d-inline-block text-truncate flex-sm-grow-1 pointer mx-1">测试</div>
          <font-awesome-icon icon="edit" size="xs" class="mx-2 pointer"/>
          <font-awesome-icon icon="times" size="xs" class="pointer"/>
        </li>
        <li class="list-group-item d-flex align-items-center">
          <font-awesome-icon class="todo-move pointer" icon="ellipsis-v" size="xs"/>
          <div class="pointer mx-2 badge rounded-circle border bg-success border-success">
            <span class="invisible">*</span>
          </div>
          <div class="d-inline-block text-truncate flex-sm-grow-1 pointer mx-1">测试</div>
          <font-awesome-icon icon="edit" size="xs" class="mx-2 pointer"/>
          <font-awesome-icon icon="times" size="xs" class="pointer"/>
        </li>
      </ul>
    </div>

    <!-- 模态框 -->
    <div class="container">
      <div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" id="myModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-body">
              <div class="d-flex mb-3 justify-content-between">
                <div class="form-check">
                  <input 
                    class="form-check-input " 
                    type="radio" 
                    name="flexRadio" 
                    id="flexRadio1" 
                  >
                  <label class="form-check-label" for="flexRadio1">Todo</label>
                </div>
                <div class="form-check">
                  <input 
                    class="form-check-input " 
                    type="radio" 
                    name="flexRadio" 
                    id="flexRadio2" 
                  >
                  <label class="form-check-label" for="flexRadio2">In Progress</label>
                </div>
                <div class="form-check">
                  <input 
                    class="form-check-input " 
                    type="radio" 
                    name="flexRadio" 
                    id="flexRadio3" 
                  >
                  <label class="form-check-label" for="flexRadio3">Done</label>
                </div>
              </div>
              <div class="mb-3">
                <input type="text" class="form-control">
              </div>
              <div class="mb-3">
                <textarea class="form-control" rows="3" maxlength="1000"></textarea>
              </div>
            </div>

            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
              <button type="button" class="btn btn-primary">OK</button>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { Modal } from "bootstrap"

export default {
  name: 'App',
  data() {
    return { myModal: null }
  },
  mounted() {
    this.myModal = new Modal(document.getElementById('myModal'));
    this.myModal.show()
  }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  margin-top: 80px;
}

*, ::after, ::before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.pointer {
  cursor: pointer;
}

.form-control:focus, .form-check-input:focus {
  box-shadow: none !important;
  border-color: #ced4da !important;
}

.fixed-top {
  background: #fff;
}
</style>
